<template>
<!-- 日收入人员列表 -->
  <div class="morning-container">
    <div class="personal-detail">
      <board-title title="收入" bgclass="bg-sr">
        <img slot="flagImg" class="flag-img" src="~@/assets/imgs/publicline/board/flag_sr.png" />
        <div slot="other-time" class="flag-time">
          <date-time ref="dataTimeRefday" @date="handleChange" />
        </div>
      </board-title>
      <div class="list-info">
        <div class="info-item">
          <div class="value-title">
            <span class="title">{{ title[type] }} </span>
          </div>
          <span class="value">{{ value }}</span>
        </div>
        <div class="info-item">
          <span>
            <span class="sub-title">月累计</span>
            <span class="value">{{ mvalue }}</span>
          </span>
          <div class="percent-title">
            <span class="sub-title">累计环比</span>
            <span v-if="hb >= 0" class="percent up">
                {{ hb }}%
                <img src="~@/assets/imgs/publicline/index/arrow_up.png" />
              </span>
              <span v-else class="percent down">
                {{ hb }}%
                <img src="~@/assets/imgs/publicline/index/arrow_down.png" />
              </span>
          </div>
        </div>
      </div>
    </div>
    <van-loading v-if="isLoading" type="spinner" color="#1989fa" />
    <div v-else>
      <div class="detail-info" v-for="item in list" :key="item.LEVEL_ID">
          <div class="item-img">
            <img class="item-img-user" src="~@/assets/imgs/publicline/board/icon-users.png" />
          </div>
          <div class="info-content">
            <div class="info-detail">
              <span class="info-name">{{ item.LEVEL_NAME }}</span>
              <span class="info-flag">{{ item.LEVEL_ID }}</span>
            </div>
            <div class="info-desc">
              当日值/当月累计
              <span style="padding-left: 20px; color: #FD806E;font-size: 14px;">{{ item.KPI_VALUE || 0 }}/{{ item.TOTAL_VALUE || 0 }}</span>
              <span class="unit">元</span>
            </div>
            <div class="percent-title">
              <span class="sub-title">环比</span>
              <span v-if="item.HB >= 0" class="percent up">
                {{ item.HB }}%
                <img src="~@/assets/imgs/publicline/index/arrow_up.png" />
              </span>
              <span v-else-if="item.HB < 0" class="percent down">
                {{ item.HB }}%
                <img src="~@/assets/imgs/publicline/index/arrow_down.png" />
              </span>
              <span v-else class="percent down">
                --
              </span>
              <span class="sub-title" style="padding-left: 24px">同比</span>
              <span v-if="item.TB >= 0" class="percent up">
                {{ item.TB }}%
                <img src="~@/assets/imgs/publicline/index/arrow_up.png" />
              </span>
              <span v-else-if="item.TB < 0" class="percent down">
                {{ item.TB }}%
                <img src="~@/assets/imgs/publicline/index/arrow_down.png" />
              </span>
              <span v-else class="percent down">
                --
              </span>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import boardTitle from '@/views/components/publicline/board/title.vue'
import dateTime from '@/components/common/dateTime.vue'
import { accountDate } from '@/api/common.js'
import * as dayjs from "dayjs"

import { kpiDayIncome, morningDayIncomeList } from '@/api/publicline/board.js'

export default {
  components: { boardTitle, dateTime },
  data() {
    return {
      isLoading: true,
      list: [],
      type: '',
      dayId: '',
      value: '',
      mvalue: '',
      hb: '',
      title: {
        'PE001-080002': '计费收入',
        'PE00101-080002': '移网计费收入',
        'PE0010204-080002': '宽带计费收入',
        'PE0010201-080002': '固话计费收入',
        'PE00103-080002': '创新计费收入',
        'PE00104-080002': '政企-基础计费收入',
        'PE00105-080002': '其他计费收入'
      }
    }
  },
  created() {
    this.type = this.$route.query.type
    this.dayId = this.$route.query.dayId
    this.value = this.toTenThousand(this.$route.query.value)
    this.mvalue = this.toTenThousand(this.$route.query.mvalue)
    this.hb = this.$route.query.hb
  },
  mounted() {
    this.getAccountDate()
    this.getKpiDetail()
  },
  methods: {
    toTenThousand(value) {
      const num = Number(value)
      let size = 0
      if(num < 10000) {
        size = value + "元"
      } else {
        size = (value / 10000).toFixed(2) + "万元"
      }
      return size
    },
    // 获取日账期
    async getAccountDate() {
      const res = await accountDate({ PARAMCODE: 'D' })
      const { result, success } = res
      if (success) {
        this.$refs.dataTimeRefday.initDateTime(dayjs(this.dayId).format('YYYY-MM-DD'), dayjs(result[0].value).format('YYYY-MM-DD'))
      }
    },
    // 获取改变的账期
    handleChange(val) {
      this.dayId = dayjs(val).format('YYYYMMDD')
      this.getKpiDayIncome()
      this.getKpiDetail()
    },
    async getKpiDayIncome() {
      const res = await kpiDayIncome({ kpiCode: this.type, orgId: this.$dataPermission, dayId: this.dayId })
      const { result, success } = res
      if (success) {
        const info = result[0] || {}
        this.value = this.toTenThousand(info.KPI_VALUE || 0)
        this.mvalue = this.toTenThousand(info.TOTAL_VALUE || 0)
        this.hb = info.HB
      }
    },
    async getKpiDetail() {
      this.isLoading = true
      const res = await morningDayIncomeList({ kpiCode: this.type, gridId: this.$gridId, dayId: this.dayId, loginId: this.$isCeo ? '' : this.$dataPermission })
      const { result, success } = res
      if (success) {
        this.list = result
        this.isLoading = false
      }
    },
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/less/person.less';

.morning-container {
  .personal-detail {
    background: #FFFFFF;
    box-shadow: 0 2px 4px 1px #f3f7fa;
    border-radius: 6px;
    margin: 12px 8px 6px;

    .list-info {
      padding: 4px 16px 6px 34px;
      .title {
        margin-top: 4px;
        color: #333;
      }
      .info-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      .value-title .title::before {
        content: '';
        width: 6px;
        height: 6px;
        border: 1px solid #4d98ff;
        display: inline-block;
        border-radius: 4px;
        margin-right: 8px;
        margin-left: -12px;
      }
      .value {
        padding-left: 8px;
        font-size: 20px;
        color: #4D98FF;
      }
      .unit {
        font-size: 14px;
      }
    }
  }
  .detail-info {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    .item-img {
      position: relative;
      .item-img-party {
        width: 20px;
        position: absolute;
        left: 24px;
        top: -4px;
      }
    }
    .info-content {
      margin-left: 16px;
    }
    .item-value {
      width: 120px;
    }
  }
  .sub-title {
    font-size: 12px;
    color: #999;
  }
  .percent-title {
    font-size: 12px;
    
    .percent {
      padding-left: 8px;
    }
    .up {
      color: #FF6024;
    }
    .down {
      color: #40BB3F;
    }
    img {
      width: 11px;
    }
  }
}
/deep/ .seller {
  .van-cell,
  .van-cell--clickable:active {
    background-color: unset;
  }
  .van-cell::after {
    border-bottom: unset;
  }
}
/deep/ .van-loading {
  text-align: center;
  padding: 40px 0;
}
</style>